<template>
    <div>
        <el-row>
            <div class="top" v-if="DeviceObj.control != true">
                <p></p>
                <el-button type="primary" style="float:right;margin-bottom: 10px;" @click="$router.go(-1)">返回</el-button>
            </div>
            <div style="display:flex;position:relative" >
                <svg width="125" height="125">
                    <!-- 绘制浅灰色圆形边框 -->
                    <circle cx="62.5" cy="62.5" r="50" stroke="lightgray" stroke-width="2" fill="white" />

                    <!-- 使用 foreignObject 嵌入 HTML 内容，并设置居中位置 -->
                    <foreignObject x="25" y="25" width="75" height="75" style="text-align: center;">
                    <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
                        <!-- 在这里添加你想要显示的图标，例如使用 Font Awesome -->
                        <i class="iconfont icon-desktop" style="font-size: 54px; color: #1296db;" v-if="DeviceObj.PCType == 1"></i>
                        <i class="iconfont icon-bijiben" style="font-size: 54px; color: #1296db;" v-if="DeviceObj.PCType == 2"></i>
                    </div>
                    </foreignObject>
                </svg>
                <div style="height: 125px;  display: flex; flex-direction: column; justify-content: center;  line-height: 1.5;font-size:18px">
                    <span v-if="DeviceObj.PCType == 1" :style="{color: DeviceObj.Status === 1 ? '#67C23A' : (DeviceObj.Status === 2 ? '#E6A23C' : (DeviceObj.Status === 3 ? '#F56C6C' : '#909399'))}">台式机电脑</span>
                    <span v-if="DeviceObj.PCType == 2" :style="{color: DeviceObj.Status === 1 ? '#67C23A' : (DeviceObj.Status === 2 ? '#E6A23C' : (DeviceObj.Status === 3 ? '#F56C6C' : '#909399'))}">笔记本电脑</span>
                    <span style="font-size: 16px; color: grey;">{{ DeviceObj.OS }}</span>
                    <span style="font-size: 16px; color: grey;" v-if="DeviceObj.TransTime != undefined"> {{DeviceObj.TransTime}}</span>
                    <!-- <span style="font-size: 16px; color: grey;"> {{DeviceObj.TransTime}}</span> -->
                </div> 
            </div>
            <el-descriptions  class="margin-top" :column="1" border>
                <el-descriptions-item>
                    <template slot="label">
                    <i class="iconfont icon-cpuchuliqi" style="margin-right:10px"></i>
                    处理器
                    </template>
                    <span v-if=" DeviceObj.Cpu">{{ DeviceObj.Cpu }}  {{ DeviceObj.CpuCoreCount }}核</span>
                </el-descriptions-item>
                <el-descriptions-item label="内存">
                    <template slot="label">
                    <i class="iconfont icon-neicun" style="margin-right: 10px;"></i>
                    内存
                    </template>
                    {{ DeviceObj.Mem}}
                </el-descriptions-item>
                <el-descriptions-item label="GPU">
                    <template slot="label">
                    <i class="iconfont icon-xianka" style="margin-right: 10px;"></i>
                    GPU
                    </template>
                    {{ DeviceObj.GPU }}
                </el-descriptions-item>
                <el-descriptions-item label="主板">
                    <template slot="label">
                    <i class="iconfont icon-xingzhuang1" style="margin-right: 10px;"></i>
                    主板
                    </template>
                    {{ DeviceObj.Mainboard }}
                </el-descriptions-item>
                <el-descriptions-item label="显示器">
                    <template slot="label">
                    <i class="iconfont icon-tv" style="margin-right: 10px;"></i>
                    显示器
                    </template>
                    {{ DeviceObj.Display }}
                </el-descriptions-item>
                <el-descriptions-item label="主硬盘">
                    <template slot="label">
                    <i class="iconfont icon-yingpan" style="margin-right: 10px;"></i>
                    主硬盘
                    </template>
                    <span v-if="DeviceObj.SysDisk">{{ DeviceObj.SysDisk }}（{{ DeviceObj.SysDiskSize }}）</span>
                </el-descriptions-item>
                <el-descriptions-item label="磁盘详情">
                    <template slot="label">
                    <i class="iconfont icon-rongliangxingyunyingpan" style="margin-right: 10px;"></i>
                    磁盘详情
                    </template>
                    {{ DeviceObj.FullDisk }}
                </el-descriptions-item>
                <el-descriptions-item label="BIOS详情">
                    <template slot="label">
                    <i class="iconfont icon-Bios" style="margin-right: 10px;"></i>
                    BIOS详情
                    </template>
                    {{ DeviceObj.BIOS }}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="操作系统">
                    <template slot="label">
                    <i class="iconfont icon-caozuoxitong" style="margin-right: 10px;"></i>
                    操作系统
                    </template>
                    {{ DeviceObj.OS }}
                </el-descriptions-item>
                <el-descriptions-item label="电脑类型">
                    <template slot="label">
                    <i class="iconfont icon-desktop" style="margin-right: 10px;" v-if="DeviceObj.PCType == 1"></i>
                    <i class="iconfont icon-bijiben" style="margin-right: 10px;" v-if="DeviceObj.PCType == 2"></i>
                    电脑类型
                    </template>
                    <span v-if="DeviceObj.PCType == 1">台式机</span>
                    <span v-if="DeviceObj.PCType == 2">笔记本</span>
                </el-descriptions-item> -->
                <el-descriptions-item label="网卡">
                    <template slot="label">
                    <i class="iconfont icon-wangka" style="margin-right: 10px;"></i>
                    网卡
                    </template>
                    {{ DeviceObj.NetCard }}
                </el-descriptions-item>
                <el-descriptions-item label="声卡">
                    <template slot="label">
                    <i class="iconfont icon-shengka" style="margin-right: 10px;"></i>
                    声卡
                    </template>
                    {{ DeviceObj.Audio }}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="CPU频率">{{ (DeviceObj.CpuHZ / 1000).toFixed(2) }} GHz</el-descriptions-item>
                <el-descriptions-item label="系统磁盘大小">{{ DeviceObj.SysDiskSize }}</el-descriptions-item>
                <el-descriptions-item label="扩展磁盘大小">{{ DeviceObj.ExtDiskSize }}</el-descriptions-item> -->
            </el-descriptions>
        </el-row>
    </div>
</template>

<script>
import { formatDuration, parseTime,  formatBytes_back,formatTime2 } from '@/utils/index'

export default {
    name: 'HardDetail',

    data() {
        return {};
    },
    props: {
        DeviceObj:{
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    watch: {
        DeviceObj: { 
            deep: true,
            handler(val,old) {
                // this.handleData();
            }
        }
    },
    mounted(){
        // this.handleData();
    },
    methods:{
        handleData(){
            let DeviceObj = this.DeviceObj
            const currentTimeStamp = new Date().getTime();
            if(!isNaN(DeviceObj.KeepRunningTime))
                this.DeviceObj.KeepRunningTime = formatDuration(DeviceObj.KeepRunningTime)
            // this.DeviceObj.onlineTotal  = DeviceObj.OnlineDeviceCount +DeviceObj.OfflineDeviceCount
            this.DeviceObj.Status_Time = formatTime2(DeviceObj.LastReportStatusTime)
            // if(DeviceObj.StatusChangeTime_redo != undefined)
            this.DeviceObj.StatusChangeTime_redo =currentTimeStamp/1000 > DeviceObj.StatusChangeTime &&DeviceObj.StatusChangeTime !=0 ? formatDuration(currentTimeStamp/1000 - DeviceObj.StatusChangeTime):0
            this.DeviceObj.Statusassert = currentTimeStamp/1000 - DeviceObj.DeviceTime
            if(!isNaN(DeviceObj.CreateTime))
                this.DeviceObj.CreateTime = parseTime(DeviceObj.CreateTime)
            if(!isNaN(DeviceObj.StartDate))
                this.DeviceObj.StartDate = parseTime(DeviceObj.StartDate)
            if(!isNaN(DeviceObj.LastEchoTime))
                this.DeviceObj.LastEchoTime = formatTime2(DeviceObj.LastEchoTime)
            this.DeviceObj.DiskUsedPct = !DeviceObj.Disk_Sys_Total? 0: ((DeviceObj.Disk_Sys_Used / DeviceObj.Disk_Sys_Total) * 100).toFixed(1) * 1
            this.DeviceObj.DiskUsed = formatBytes_back(DeviceObj.Disk_Sys_Used)
            this.DeviceObj.DiskTotal = formatBytes_back(DeviceObj.Disk_Sys_Total)
            this.DeviceObj.MemUsedPct = !DeviceObj.Memeory_Total?0:((DeviceObj.Memeory_Used / DeviceObj.Memeory_Total) * 100).toFixed(1) * 1
            this.DeviceObj.DiskSoftPct = !DeviceObj.Disk_Ext_Total?0:((DeviceObj.Disk_Ext_Used / DeviceObj.Disk_Ext_Total) * 100).toFixed(1) * 1
            this.DeviceObj.DiskSoftUsed = formatBytes_back(DeviceObj.Disk_Ext_Used)
            this.DeviceObj.DiskSoftTotal = formatBytes_back(DeviceObj.Disk_Ext_Total)
        },
    }

}
</script>
<style lang="scss" scoped>
.top{
    // width: 10px;
    float: right;
    display: flex;
    justify-content: space-between;
    align-content: center;
    .el-button{
        margin-bottom: 10px;
    }
}
::v-deep .el-progress-bar {
  width: 70%; /* 设置进度条的宽度 */
  /* 添加其他样式属性 */
}
::v-deep .el-descriptions-item__label.is-bordered-label{
    width: 200px;
}
</style>